<template>

  <div class="bot-content">

    <el-table :data="tableData" style="width: 100%" border stripe :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }">
      <el-table-column prop="id" label="ID" width="120" />
      <el-table-column prop="name" label="素材名称" />
      <el-table-column prop="content" label="内容" width="170" />
      <el-table-column label="查看" width="210">
        <template #default="scope">
          <el-button color="#1074FD" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="状态" width="230"> </el-table-column>
      <el-table-column prop="date" label="生成日期" width="300"> </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button color="#1074FD" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button color="#FF0000" @click="handleEdit(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="center" align="middle" style="height: 60px;margin-top: 60px;">
      <el-pagination background layout="prev, pager, next" :total="1000" />
    </el-row>
  </div>

</template>

<script>
export default {
  name: 'ElectronOctopusTableView',

  data() {
    return {
      tableData: [
        {
          id: '1',
          date: '2016-05-03',
          name: '长尾词/自定义视频/图片',
          address: 'No. 189, Grove St, Los Angeles',
          content: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        }
      ]

    },

      mounted() {

    },

    methods: {

    },
  };
</script>

<style scoped>
.bot-content {
  margin-top: 19px;
  height: 438vh;
  background-color: #fff;
  padding: 10px 10px 10px 10px;
  border-radius: 8px;
}
</style>